import Taro, { useDidShow, useState, useMemo, useReachBottom } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import m from 'moment'
import './index.scss'

// components
import CashList from "../../components/cashList";
import NoData from '../../components/noData'
import Poster from '../../components/poster'

// api
import api from '../../api/index';

// utils
import getLoginInfo from "../../utils/getLoginInfo";

export default function Invitation() {
  const [user, setUser] = useState({})
  const [inviteUserList, setInviteUserList] = useState([])
  // const [reward, setReward] = useState(0)
  const PAGE_SIZE = 10
  const [isMore, setIsMore] = useState(false)
  const [loading, setLoading] = useState(false)
  const [isPosterVisible, setIsPosterVisible] = useState(false)



  useDidShow(async () => {
    const userData = getLoginInfo();
    setUser(userData)

    getInvitationList(0, PAGE_SIZE -1 , true)

    // const _reward = await api.user.getReward();
    // if (_reward) {
    //   setReward(_reward / 100)
    // }
  }, [])

  useReachBottom(() => {
    if (isMore) {
      getInvitationList(inviteUserList.length, (inviteUserList.length + PAGE_SIZE - 1))
    }
  })

  async function getInvitationList(start = 0, end = PAGE_SIZE -1, isRefresh) {
    setLoading(true)
    try {
      const data = await api.user.getInvitation({
        start,
        end
      });
      setLoading(false)
      if (data.code > 0) {
        const list = JSON.parse(data.data).inviteUserList
        if (list.length === PAGE_SIZE) {
          setIsMore(true)
        } else {
          setIsMore(false)
        }

        if (isRefresh) {
          setInviteUserList(list)
        } else {
          setInviteUserList([
            ...inviteUserList,
            ...list
          ])
        }
      }
    } catch(err ) {
      setLoading(false)
    }

  }

  const listData = useMemo(() => {
    return inviteUserList.map(item => {
      return {
        avatar: require('../../assets/180x180defalut_avatar@2x.png'),
        name: item.mobile.replace(/^(\d{3})\d{4}(\d+)/,"$1****$2"),
        desc: m(item.register_date).format('YYYY-MM-DD HH:mm:ss'),
        num: item.reward_cash_cent / 100
      }
    })
  }, [inviteUserList])

  return (
    <View className='cash-page'>
      <View className='header'>
        <Text className='text'>奖励规则:每成功邀请一位好友购买千读VIP可获 20 ~ 50 元红包</Text>
      </View>

      <View className='cash-list-container'>
        <View className='cash-list-wrapper'>
          {
            listData.length > 0 ? (
              <View className='list'>
                <CashList listData={listData} />
              </View>
            ) : (
              <View style={{ marginTop: '20px' }}>
                <NoData desc='你还没邀请过好友哦~' />
              </View>
            )
          }
          {
            loading && (
              <View className='list-tips'>
                加载中...
              </View>
            )
          }
          {
            !isMore && listData.length > 0 && (
              <View className='list-tips'>
                没有更多了~
              </View>
            )
          }
        </View>
      </View>

      <View className='footer-container'>
        <View className='footer'>
          <View className='text'>
            据说每转发3个群，成功率高达90%
          </View>
          <View className='btn-container'>
            <View className='btn friend' onClick={() => setIsPosterVisible(true)}>邀请好友</View>
          </View>
        </View>
      </View>

      {
        user.token && (
          <Poster
            user={user}
            visible={isPosterVisible}
            onCancel={() => setIsPosterVisible(false)}
          />
        )
      }
    </View>
  )
}

Invitation.config = {
  navigationBarTitleText: '好友邀请',
}
